<!--
 * @Author: meifeng mei.feng@asiainfo-sec.com
 * @Date: 2023-09-14 15:06:18
 * @LastEditors: meifeng mei.feng@asiainfo-sec.com
 * @LastEditTime: 2023-09-23 15:16:19
 * @FilePath: \admin_vue\src\views\T10.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${meifeng}, All Rights Reserved.
-->

<template>
    <div class="t10_wrap">
        <span class="bg"></span>
        <canvas id="canvas"></canvas>
    </div>
</template>
<script>


export default {
    name: 'T10',
    data() {
        return {
            canvas: null,
            ctx: null,
            particleNum: null,
            lineDistance: null,
            colorRGB: null,
            particles: null,
            interactiionParticle: null,
            Particle: null,
        }
    },
    components: {

    },
    computed: {

    },

    mounted() {
        console.log('created执行了')
        this.canvas = document.getElementById('canvas')
        this.ctx = this.canvas.getContext('2d')
        this.canvas.width = window.innerWidth
        this.canvas.height = window.innerHeight
        this.particleNum = 100
        this.lineDistance = 120
        this.colorRGB = '255, 255, 255'
        this.particles = []
        this.interactiionParticle = null
        let that = this
        class Particle {
            constructor(x, y, velocityX, velocityY, size, color) {
                this.x = x
                this.y = y
                this.velocityX = velocityX
                this.velocityY = velocityY
                this.size = size
                this.color = color
            }

            draw() {
                that.ctx.beginPath()
                that.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
                that.ctx.fillStyle = this.color
                that.ctx.fill()
            }

            update() {
                if (this.x < 0 || this.x > that.canvas.width) {
                    this.velocityX *= -1
                }
                if (this.y < 0 || this.y > that.canvas.height) {
                    this.velocityY *= -1
                }
                this.x += this.velocityX
                this.y += this.velocityY
                this.draw()
            }
        }
        that.Particle = Particle
        that.init()
    },

    methods: {
        init() {
            this.binEvents()
            this.createParticles()
            this.animate()
        },
        getRandomArbitrary(min, max) {
            return Math.random() * (max - min) + min
        },
        createParticles() {
            for (let i = 0; i < this.particleNum; i++) {
                let size = this.getRandomArbitrary(1, 3)
                let x = Math.random() * this.canvas.width
                let y = Math.random() * this.canvas.height
                let velocityX = this.getRandomArbitrary(-2, 2)
                let velocityY = this.getRandomArbitrary(-2, 2)
                let color = `rgba(${this.colorRGB}, ${1 - size / 3})`
                this.particles.push(new this.Particle(x, y, velocityX, velocityY, size, color))
            }
        },
        connect() {
            for (let i = 0; i < this.particles.length; i++) {
                for (let j = i + 1; j < this.particles.length; j++) {
                    const p1 = this.particles[i]
                    const p2 = this.particles[j]
                    let distance = Math.sqrt(((p1.x - p2.x) ** 2) + ((p1.y - p2.y) ** 2))
                    if (distance < this.lineDistance) {
                        this.ctx.strokeStyle = `rgba(${this.colorRGB}, ${1 - distance / this.lineDistance})`
                        this.ctx.beginPath()
                        this.ctx.lineWidth = 0.8
                        this.ctx.moveTo(p1.x, p1.y)
                        this.ctx.lineTo(p2.x, p2.y)
                        this.ctx.stroke()
                    }
                }
            }
        },
        animate() {
            requestAnimationFrame(this.animate)
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
            this.particles.forEach(particle => {
                particle.update()
            })
            this.connect()
        },
        binEvents() {
            this.canvas.addEventListener('mouseover', e => {
                if (!this.interactiionParticle) {
                    this.interactiionParticle = new this.Particle(e.x, e.y, 0, 0, 2, `rgba(${this.colorRGB}, 1)`)
                    this.particles.push(this.interactiionParticle)
                }
            })
            this.canvas.addEventListener('mousemove', e => {
                let aside = document.getElementsByTagName('aside')[0].clientWidth
                this.interactiionParticle.x = e.x - aside
                this.interactiionParticle.y = e.y - 84
            })
            this.canvas.addEventListener('mouseout', () => {
                this.interactiionParticle.x = null
                this.interactiionParticle.y = null
            })
        },
    },
}
</script>
<style scoped>
.t10_wrap{
    background-image: url(../assets/imgs/bg.gif);
    background-repeat: repeat;
    background-color: #0a0a0a;
}
</style>